<template>
    <div class="container">
        <el-dialog
          title="提示"
          :visible.sync="centerDialogVisible"
          width="30%"
          center>
          <span>确定要删除商品嘛</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="deletes()" >确 定</el-button>
          </span>
        </el-dialog>
  <div class="cart">
    <div class="page-title-normal">
      <h2 class="page-title-h2"><span>My Cart</span></h2>
    </div>
    <div class="item-list-wrap">
      <div class="cart-item">
        <div class="cart-item-head">
          <ul>
            <li>Items</li>
            <li>Price</li>
            <li>Quantity</li>
            <li>Subtotal</li>
            <li>Edit</li>
          </ul>
        </div>
        <ul class="cart-item-list">
          <li v-for="item in cartList" :key="item.productId">
            <div class="cart-tab-1">
              <div class="cart-item-check">
                <el-checkbox v-model="item.checked" @change="checkChange('1',item,'1')"></el-checkbox>
              </div>
              <div class="cart-item-pic">
                <img :src="require('../../assets/images/'+item.productImage)">
              </div>
              <div class="cart-item-title">
                <div class="item-name">{{item.productName}}</div>
              </div>
            </div>
            <div class="cart-tab-2">
              <div class="item-price">{{item.salePrice}}</div>
            </div>
            <div class="cart-tab-3">
              <div class="item-quantity">
                <div class="select-self select-self-open">
                  <div class="select-self-area">
                    <a class="input-sub" @click.prevent="changeNum('sub',item)">-</a>
                    <span class="select-ipt">{{item.productNum}}</span>
                    <a class="input-add" @click.prevent="changeNum('add',item)">+</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="cart-tab-4">
              <div class="item-price-total">{{item.productNum*item.salePrice}}</div>
            </div>
            <div class="cart-tab-5">
              <div class="cart-item-opration">
                <a href="javascript:;" class="item-edit-btn" @click="open(item.productId,item.productNum)">
                  <img src="../../assets/images/delete.png" style="width:30px;height:30px;"> 
                </a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="cart-foot-wrap">
      <div class="cart-foot-inner">
        <div class="cart-foot-l">
          <div class="item-all-check">
            <a href="javascipt:;" @click.prevent="selectAll()">
                  <el-checkbox v-model="changeFlag" @change="cancelSelectAll()"></el-checkbox>
              <span style="margin-left:10px">Select all</span>
            </a>
          </div>
        </div>
        <div class="cart-foot-r">
          <div class="item-total">
            Item total: <span class="total-price">{{totalPrice}}</span>
          </div>
          <div class="btn-wrap">
            <a class="btn btn--red" @click="checkOut()">Checkout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import '../../assets/css/base.css'
import '../../assets/css/checkout.css'
import '../../assets/css/login.css'
import '../../assets/css/product.css'
export default {
    name:'Cart',
    data(){
        return{
            cartList:[],
            centerDialogVisible:false,
            productId:'',
            productNum:0,
        }
    },
    methods:{
        cancel(){
            this.centerDialogVisible = false
        },
        deletes(){
            this.axios.defaults.withCredentials = true
            this.$store.commit('subCartNum',this.productNum);
            this.axios.post('http://127.0.0.1:3333/deleteProduct',{productId:this.productId}).then((res)=>{
                if(res.data.status == '0'){
                    this.centerDialogVisible = false;
                    for(let i =0;i<this.cartList.length;i++){
                        if(this.cartList[i].productId == this.productId){
                            this.cartList.splice(i,1);
                            //console.log(this.cartList[i].productNum)
                            //this.$store.commit('subCartNum',parseFloat(this.cartList[i].productNum));
                        }
                    }
                }
            });
        },
        open(id,num){
            this.centerDialogVisible = true;
            console.log(id);
            this.productId = id;
            this.productNum = num;
        },
        changeNum(flag,item){
            this.axios.defaults.withCredentials = true
            if(flag == 'add'){
                item.productNum++;
                this.$store.commit('addCartNum',1);
            }else{
                item.productNum--;
                this.$store.commit('subCartNum',1);
                if(item.productNum <= 1){
                    item.productNum = 1
                }
            }
            let param = {productId:item.productId,productNum:item.productNum}
            this.axios.post('http://127.0.0.1:3333/changeNum',param).then((res)=>{
                if(res.data.status == '0'){
                    console.log(res);
                }
            }).catch((err)=>{
            console.log(err);
        })  
        },
        checkChange(flag,item,val){
            if(flag=='1'){
              item.checked = (!item.checked)?false:true
              console.log(item.checked)
            }else{
              item.checked = val
            }
            this.axios.defaults.withCredentials = true
            let param = {productId:item.productId,checked:item.checked}
            this.axios.post('http://127.0.0.1:3333/changeCheck',param).then((res)=>{
                if(res.data.status == '0'){
                    console.log(res);
                }
            }).catch((err)=>{
            console.log(err);
            })
        },
        selectAll(){
            var flag = !this.changeFlag;
            //var val = this.changeFlag?'0':'1'
            var val = flag?true:false
            console.log(val);
            this.cartList.forEach((item)=>{
                this.checkChange('2',item,val);
            })
            // if(this.changeFlag){
            //     this.cartList.forEach((item)=>{
            //         item.checked = '0';
            //     })
            // }else{

            // }
        },
        checkOut(){
          if(this.checkedCount == 0){
            return;
          }else{
            this.$router.push({path:'/address'})
          }
        }
    },
    mounted(){
        this.axios.defaults.withCredentials = true
        this.axios.get('http://127.0.0.1:3333/getCartList').then((res)=>{
            if(res.data.status == '0'){
                this.cartList = res.data.result;
            }
        }).catch((err)=>{
            console.log(err);
        })  
    },
    // 计算属性
    computed:{
      checkedCount(){
        var i = 0;
        this.cartList.forEach((item)=>{
          if(item.checked){
            i++;
          }
        })
        return i;
      },
      changeFlag:{
        get:function(){
          return this.checkedCount == this.cartList.length;
        },
        set:function(){

        }
      },
      totalPrice(){
        var momey = 0;
        this.cartList.forEach((item)=>{
          if(item.checked){
            momey += parseFloat(item.salePrice)*parseFloat(item.productNum);
          }
        });
        return momey;
      }
    }
}
</script>

<style scoped>
    .input-sub,.input-add{
      min-width: 40px;
      height: 100%;
      border: 0;
      color: #605F5F;
      text-align: center;
      font-size: 16px;
      overflow: hidden;
      display: inline-block;
      background: #f0f0f0;
    }
    .item-quantity .select-self-area{
      background:none;
      border: 1px solid #f0f0f0;
    }
    .item-quantity .select-self-area .select-ipt{
      display: inline-block;
      padding:0 3px;
      width: 30px;
      min-width: 30px;
      text-align: center;
    }
</style>